<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<div id="app">
    <table>
        <tr v-for="user in users">
            <td>{{user.id}}</td>
            <td>{{user.name}}</td>
            <td>{{user.password}}</td>
            <td><input type="button" value="编辑" v-on:click="doEdit(user)"></td>
        </tr>
        <div>
            <input type="text" v-model="user.id"><br>
            <input type="text" v-model="user.name"><br>
            <input type="text" v-model="user.password"><br>
            <input type="button" value="提交" v-on:click="add">
            <input type="button" value="编辑" v-on:click="edit(user)">
        </div>
    </table>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script src="./node_modules/axios/dist/axios.js"></script>
<script>
    let vm = new Vue({
        el: "#app",//告诉vue现在要控制的对象
        data: {
            users: [],
            user: {}
        },
        methods: {
            edit:function(user){
                axios.put("http://localhost:81/test/edit.do",this.user).then((result)=>{
                    this.getUserList()
                })
            },
            add: function () {
                console.log(this.user);
                axios.post("http://localhost:81/test/add.do", this.user).then((result) => {
                    this.getUserList()
                })
            },
            doEdit:function(user){
                //console.log(user);
                axios.get("http://localhost:81/test/findById.do",{
                    params:{
                        id:user.id,
                    }
                }).then((result)=>{
                    //console.log(result);
                    this.user = result.data
                })
            },
            getUserList() {
                axios.get("http://localhost:81/test/find.do").then((result) => {
                    //console.log(result.data);
                    this.users = result.data
                }).catch((er) => {
                    console.log("错误" + er);
                })
            }
        },
        /*http://localhost:81/*/
        created() {
            //页面加载的时候查询列表
            this.getUserList()
        }
    })
</script>
</body>
</html>